const word = document.getElementById('word');
const text = document.getElementById('text');
const scoreEl = document.getElementById('score');
const timeEl = document.getElementById('time');
const endgameEl = document.getElementById('end-game-container');
const settingsBtn = document.getElementById('settings-btn');
const settings = document.getElementById('settings');
const settingsForm = document.getElementById('settings-form');
const difficultySelect = document.getElementById('difficulty');

const words = [
    'const',
    'let',
    'input',
    'image',
    'form',
    'style',
    'display',
    'container',
    'element',
    'class',
    'document',
    'background',
    'transition',
    'transform',
    'translate',
    'border',
    'radius',
    'margin',
    'padding',
    'select'
];

let randomWord;

let score = 0;

let time = 10;

let difficulty = localStorage.getItem('difficulty') !== null 
    ? localStorage.getItem('difficulty') 
    : 'medium';

difficultySelect.value = difficulty;

text.focus();

const timeInterval = setInterval(updateTime, 1000);

function getRandomWord() {
    return words[Math.floor(Math.random() * words.length)];
}


function addWordToDOM() {
    randomWord = getRandomWord();
    word.innerHTML = randomWord;
}


function updateScore() {
    score++;
    scoreEl.innerHTML = score;
}


function updateTime() {
    time--;
    timeEl.innerHTML = time + 's';

    if (time === 0) {
        clearInterval(timeInterval);
        gameOver();
    }
}

function gameOver() {
    endgameEl.innerHTML = `
        <h1>游戏结束</h1>
        <p>你的最终得分: ${score}</p>
        <button onclick="location.reload()">再玩一次</button>
    `;
    
    
    endgameEl.style.display = 'flex'; 

    text.disabled = true;
}

text.addEventListener('input', function(e) {
    const insertedText = e.target.value;

    if (insertedText === randomWord) {
        addWordToDOM();  
        updateScore();
        e.target.value = '';

        // 根据难度增加时间
        if(difficulty === 'hard') {
            time += 2;
        } else if (difficulty === 'medium') {
            time += 3;
        } else {
            time += 5;
        }
        
        // 直接更新时间显示，不调用updateTime()避免立即减少时间
        timeEl.innerHTML = time + 's';
    }
});

settingsBtn.addEventListener('click',function() {
    settings.classList.toggle('hide');
})

settingsForm.addEventListener('change',function(e) {
    difficulty = e.target.value;
    localStorage.setItem('difficulty',difficulty);
})
// 在游戏初始化时根据难度设置初始时间
if(difficulty === 'hard') {
    time = 5;
} else if (difficulty === 'medium') {
    time = 10;
} else {
    time = 15;
}
timeEl.innerHTML = time + 's';

function updateTime() {
    time--;
    timeEl.innerHTML = time + 's';
    
    if (time <= 0) {  // 改为<=更安全
        clearInterval(timeInterval);
        gameOver();
    }
}

let isPlaying = false;

function startGame() {
    if(!isPlaying) {
        isPlaying = true;
        timeInterval = setInterval(updateTime, 1000);
    }
}

endgameEl.classList.add('show');

function initGame() {
    score = 0;
    scoreEl.innerHTML = score;
    
    if(difficulty === 'hard') {
        time = 5;
    } else if(difficulty === 'medium') {
        time = 10;
    } else {
        time = 15;
    }
    timeEl.innerHTML = time + 's';
    
    text.disabled = false;
    text.focus();
    addWordToDOM();
    
    // 清除旧计时器
    if(timeInterval) clearInterval(timeInterval);
    timeInterval = setInterval(updateTime, 1000);
    
    // 确保游戏容器可见
    document.querySelector('.container').style.display = 'block';
    endgameEl.style.display = 'none';
}

// 页面加载后初始化游戏
window.addEventListener('load', initGame);